<!--
zx 订单文件 html
描述: 订单
最后修改时间：9.24/
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/home/ordermessage.css">
    <link rel="stylesheet" href="css/quote/bootstrap.css">

    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/footer.css">

    <script src="js/quote/jquery-3.4.1.js"></script>
    <script src="js/quote/bootstrap.js"></script>
    <script src="js/quote/hf.js"></script>


    <link rel="stylesheet" href="css/layui.css">

    <style>
        .layui-table .checkbox {
            width: 18px;
        }

        .layui-table th {
            text-align: center;
        }

        .red {
            color: red;
        }

        .layui-form {
            width: 800px;
        }

        .pageNum li{
            cursor: pointer;

        }
        .pageNum li a{
          text-decoration: none ;
        }


    </style>
</head>
<body>
<!--添加头部尾部-->
<div class="page-content">
    <!--  设置背景色  -->
    <div class="order_bg">
        <br>
        <div class="container">
            <div class="order_left" style="background-color: white">
                <div class="link-group">
                    <p class="title"><a href="">我的吃游</a></p>
                    <p class="title" style="cursor:pointer" onclick="orderInfo()">我的订单</p>
                    <ul class="link-ul">

                        <li role="presentation" class="active"><a href="#home" aria-controls="home"
                                                                  role="tab" data-toggle="tab">全部订单</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                                   data-toggle="tab">待付款</a></li>
                        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                                                   data-toggle="tab">待评价</a></li>
                        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
                                                   data-toggle="tab">退货/售后</a></li>
                    </ul>
                </div>
                <div class="link-group">
                    <p class="title"><a href="mycolle.html">我的收藏</a></p>
                    <ul class="link-ul">
                        <li><a href="mycolle.html">收藏的商家</a><span class="num"></span><i
                                class="glyphicon glyphicon-menu-right"></i></li>
                        <li><a href="mycolle.html">收藏的商品</a><span class="num"></span><i class="glyphicon glyphicon-menu-right"></i>
                        </li>
                    </ul>
                </div>
<!--                <div class="link-group">-->
<!--                    <p class="title" style="cursor:pointer" onclick="userInfo()">我的资料</p>-->
<!--                    <ul class="link-ul">-->
<!--                        <li><a href="error/kaifa.html">个人信息</a><span class="num"></span><i-->
<!--                                class="glyphicon glyphicon-menu-right"></i>-->
<!--                        </li>-->
<!--                        <li><a href="error/kaifa.html">修改信息</a><span class="num"></span><i-->
<!--                                class="glyphicon glyphicon-menu-right"></i>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
            </div>
            <div class="order_right_box">
                <div class="order_right">
                    <div class="orders">
                        <div class="orders-head">


                            <!--   关于订单的div-->
                            <div id="order_info">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" id="f1"><a href="#home" aria-controls="home"
                                                                       role="tab" data-toggle="tab">全部订单</a></li>
                                    <li role="presentation" id="f2"><a href="#profile" aria-controls="profile"
                                                                       role="tab"
                                                                       data-toggle="tab">待付款</a></li>
                                    <li role="presentation" id="f3"><a href="#messages" aria-controls="messages"
                                                                       role="tab"
                                                                       data-toggle="tab">待评价</a></li>
                                   <!-- <li role="presentation" id="f4"><a href="#settings" aria-controls="settings"
                                                                       role="tab"
                                                                       data-toggle="tab">退货/售后</a></li>-->
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="home">
                                        <!--     没有信息的情况           -->
                                        <div class="orders-body">
                                            <div>
                                                <div class="order-item clearfix " style="padding: 0px">
                                                    <div style="min-height: 390px">
                                                    <table class="layui-table all_order" style="text-align: center;">
                                                        <thead>
                                                        <tr>
                                                            <th><input type="checkbox" name="" lay-skin="primary"
                                                                       class="checkboxAll checkbox"
                                                                       onclick="selectAll(this)"></th>
                                                            <th>订单号</th>

                                                            <th>店铺名</th>
                                                            <th>商品数量</th>
                                                            <th>状态</th>
                                                            <th>下单时间</th>
                                                            <td>下操作</td>

                                                        </tr>
                                                        </thead>

                                                    </table></div>
                                                    <div class="pageNum">
                                                        <ul id="pageNum">
                                                            <li><a href="">首页</a></li>
                                                            <li class="threeword"><a href="#">上一页</a></li>
                                                            <li class="curPage"><a href="#">1</a></li>
                                                            <li><a href="#">2</a></li>
                                                            <li><a href="#">3</a></li>
                                                            <li><a href="#">4</a></li>
                                                            <li><a href="#">5</a></li>

                                                            <li class="threeword"><a href="javascript:;">下一页</a></li>
                                                            <li class="threeword"><a href="javascript:;">末页</a></li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="profile">
                                        <!-- 有信息的情况 -->
                                        <div class="orders-body">
                                            <div>
                                                <div class="order-item clearfix " style="padding: 0px">

                                                    <table class="layui-table  non-payment" style="text-align: center;">
                                                        <thead>
                                                        <tr>

                                                            <th>订单号</th>

                                                            <th>店铺名</th>
                                                            <th>店铺评分</th>
                                                            <th>状态</th>
                                                            <th>下单时间</th>
                                                            <td>操作</td>

                                                        </tr>
                                                        </thead>


                                                    </table>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div role="tabpanel" class="tab-pane" id="messages">
                                        <div class="orders-body">
                                            <div>
                                                <div class="order-item clearfix " style="padding: 0px">
                                                    <table class="layui-table obligation" style="text-align: center;">
                                                        <thead>
                                                        <tr>

                                                            <th>订单号</th>

                                                            <th>店铺名</th>
                                                            <th>店铺评分</th>
                                                            <th>状态</th>
                                                            <th>下单时间</th>
                                                            <td>操作</td>

                                                        </tr>
                                                        </thead>


                                                    </table>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="settings"
                                         style="color: red;text-align: center">开发中 敬请期待
                                    </div>
                                </div>
                            </div>


                            <!--   关于用户信息的div-->
                            <div id="user_info" style="display: none;">

                                <div style="padding: 15px;" class="layui-anim layui-anim-upbit">

                                    <div class="layui-field-box">
                                        <form class="layui-form" action="" id="userInfoForm"
                                              enctype="multipart/form-data">
                                            <div class="layui-form-item">

                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>账号：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="id" id="id" class="layui-input"
                                                               readonly>
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>密码：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="userPassword" id="userPassword"
                                                               class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>昵称：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="userId" id="userId"
                                                               class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>邮件：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="userEmail" id="userEmail"
                                                               class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>地址：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="userLocation" id="userLocation"
                                                               class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>性别：</label>
                                                    <div class="layui-input-inline">
                                                        <select name="userSex" id="userSex" lay-verify="required"
                                                                style="width: 180px;height: 40px; margin-left: 30px">
                                                            <option value="1">男</option>
                                                            <option value="2">女</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>电话：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="userPhone" id="userPhone"
                                                               class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>职业：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="userProfessional" id="userProfessional"
                                                               class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>年龄：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="userAge" id="userAge"
                                                               class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>头像：</label>
                                                    <div class="layui-input-block">
                                                        <input type="file" name="userHeadphoto" id="userHeadphoto"
                                                               class="layui-input" style="width: 180px;height: 40px">
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>生日：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="userBirthday" id="userBirthday"
                                                               class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"><span
                                                            class="red">*</span>权限：</label>
                                                    <div class="layui-input-inline">
                                                        <select name="userVipGrade" id="userVipGrade"
                                                                lay-verify="required"
                                                                style="width: 180px;height: 40px; margin-left: 30px"
                                                                disabled="disabled">
                                                            <option value="1">会员</option>
                                                            <option value="0">普通用户</option>
                                                        </select>
                                                    </div>

                                                </div>

                                                <div class="layui-row">
                                                    <div class="layui-col-xs6">
                                                        <input type="button" value="重置"
                                                               style="width: 180px;height: 40px; margin-left: 110px">
                                                    </div>
                                                    <div class="layui-col-xs6">
                                                        <input type="button" value="提交" onclick="updataUserInfo()"
                                                               style="width: 180px;height: 40px; margin-left: 10px">
                                                    </div>
                                                </div>

                                            </div>
                                        </form>

                                    </div>


                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    function selectAll(obj) {
        $(".checkbox").prop("checked", obj.checked)
    }
    /*展示全部的订单*/
    function load(currentPage) {
        $.get("user/finduser", {}, function (data) {
            if (data.length > 0) {
                var user = data;


                $.ajax({
                    url: "order/findOrderByUserIdAndPage",
                    data: {"userId": user, "currPage": currentPage},
                    success: function (data) {



                        var lis = "";
                        var firstPage = ' <li onclick="load(1)"><a href="javascript:void(0)">首页</a></li>'
                        //计算上一页的页码
                        var beforeNum = data.currPage - 1;
                        if (beforeNum <= 0) {
                            beforeNum = 1;
                        }
                        var beforePage = '<li  onclick="load(' + beforeNum + ')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
                        lis += firstPage;
                        lis += beforePage;


                        var begin; // 开始位置
                        var end; //  结束位置

                        begin = 1;
                        end = data.sizes;


                        for (var i = begin; i <= end; i++) {
                            var li;
                            //判断当前页码是否等于i
                            if (data.currPage == i) {

                                li = '<li style="background-color: #ffc900;" onclick="load(' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';

                            } else {
                                //创建页码的li
                                li = '<li onclick="load(' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';
                            }
                            //拼接字符串
                            lis += li;
                        }
                        //计算下一页的页码
                        var afterNum = data.currPage + 1;
                        if (afterNum >end) {
                            afterNum = end;
                        }
                        var lastPage = '<li  onclick="load('+end+')"class="threeword"><a href="javascript:void(0)">末页</a></li>';
                        var nextPage = '<li  onclick="load('+afterNum+')"class="threeword"><a href="javascript:void(0)">下一页</a></li>';

                        lis += nextPage;
                        lis += lastPage;


                        //将lis内容设置到 ul
                        $("#pageNum").html(lis);


                        console.log(data.dataList)
                        var Ispay
                        var time
                        $('.all_order').html(' <thead>\n' +
                            '                                    <tr>\n' +

                            '                                        <th >订单号</th>\n' +
                            '\n' +
                            '                                        <th>店铺名</th>\n' +
                            '                                        <th>店铺评分</th>\n' +
                            '                                        <th>状态</th>\n' +
                            '                                        <th>下单时间</th>\n' +
                            '                                        <td>操作</td>\n' +
                            '\n' +
                            '                                    </tr>\n' +
                            '                                    </thead>')
                        $.each(data.dataList, function (i, dom) {


                            if (dom.orderIsPay == "1") {
                                Ispay = "已支付"
                            } else {
                                Ispay = "未支付"
                            }
                            time = dom.orderHours
                            time = time.substring(0, 16)
                            time=time.replace("T"," ")


                            $('.all_order').append(
                                `
                             <tr>

                                        <td>${dom.id}</td>
                                        <td>${dom.storeList[0].storeName}</td>
                                        <td>${dom.storeList[0].storeScore}</td>

                                        <td>` + Ispay + `</td>
                                        <td>` + time + `</td>
                                        <td>
                                        <button class="layui-btn layui-btn-normal"  ><a href="orderdetail.html?orderId=${dom.orderId}&orderIsPay=${dom.orderIsPay}">详情</a></button>
                                            <button class="layui-btn layui-btn-warm" onclick="delectOrder('${dom.orderId}')">删除</button>

                                        </td>
                                    </tr>
                     `)
                        });
                    }
                })

            }
        });



    }


    $.get("user/finduser", {}, function (data) {
        if (data.length > 0) {
            var user = data;

            load(1)
            //只展示未支付的订单
            $.ajax({
                url: "order/findOrderByUserId",
                data: {"userId": user},
                success: function (data) {


                    var Ispay
                    var time
                    $.each(data.data, function (i, dom) {

                        if (dom.orderIsPay == "1") {
                            return;
                        } else {
                            Ispay = "未支付"
                        }
                        time = dom.orderHours
                        time = time.substring(0, 16)
                        time=time.replace("T"," ")
                        $('.non-payment').append(
                            `
                             <tr>

                                        <td>${dom.id}</td>
                                        <td>${dom.storeList[0].storeName}</td>
                                        <td>${dom.storeList[0].storeScore}</td>

                                        <td>` + Ispay + `</td>
                                        <td>` + time + `</td>
                                        <td>
                                        <button class="layui-btn layui-btn-normal" ><a href="orderdetail.html?orderId=${dom.orderId}&orderIsPay=${dom.orderIsPay}">详情</a></button>
                                            <button class="layui-btn layui-btn-warm" onclick="delectOrder('${dom.orderId}')">删除</button>

                                        </td>
                                    </tr>
                     `)
                    });
                }
            })

            //只展示未评论的订单
            $.ajax({
                url: "order/findOrderByUserId",
                data: {"userId": user},
                success: function (data) {
                    var Ispay
                    var time

                    $.each(data.data, function (i, dom) {


                        if (dom.orderIsPay == "1" && dom.orderIsEvaluation == "0") {
                            Ispay = "已支付"
                        } else {
                            return;
                        }

                        time = dom.orderHours
                        time = time.substring(0, 16)
                        time=time.replace("T"," ")

                        $('.obligation').append(
                            `
                             <tr>

                                        <td>${dom.id}</td>
                                        <td>${dom.storeList[0].storeName}</td>
                                        <td>${dom.storeList[0].storeScore}</td>

                                        <td>` + Ispay + `</td>
                                        <td>` + time + `</td>
                                        <td>
                                        <button class="layui-btn layui-btn-normal" ><a href="ordergrade.html?orderId=${dom.orderId}&orderIsPay=${dom.orderIsPay}">评价</a></button>
                                            <button class="layui-btn layui-btn-warm" onclick="delectOrder('${dom.orderId}')">删除</button>

                                        </td>
                                    </tr>
                     `)
                    });
                }
            })

        }
    });


    //ajax局部刷新  即重新加载ajax页面
    function delectOrder(orderId) {

        $.get("user/finduser", {}, function (data) {
            if (data.length > 0) {
                var user = data;

                //局部全部订单

                $.ajax({
                    url: "order/deleteOrderById",
                    data: {"orderId": orderId},
                    success: function () {

                        load(1)
                    }
                })


                //局部刷新已支付
                $.ajax({
                    url: "order/deleteOrderById",
                    data: {"orderId": orderId},
                    success: function () {

                        $.ajax({
                            url: "order/findOrderByUserId",
                            data: {"userId": user},
                            success: function (data) {
                                console.log(data.data)


                                var Ispay
                                var time
                                $('.non-payment').html(' <thead>\n' +
                                    '                                    <tr>\n' +
                                    '                                        <th >订单号</th>\n' +
                                    '\n' +
                                    '                                        <th>店铺名</th>\n' +
                                    '                                        <th>商品数量</th>\n' +
                                    '                                        <th>状态</th>\n' +
                                    '                                        <th>操作</th>\n' +
                                    '                                        <td>下单时间</td>\n' +
                                    '\n' +
                                    '                                    </tr>\n' +
                                    '                                    </thead>')
                                $.each(data.data, function (i, dom) {


                                    if (dom.orderIsPay == "1") {
                                        return;
                                    } else {
                                        Ispay = "未支付"
                                    }
                                    time = dom.orderHours
                                    time = time.substring(0, 16)
                                    time=time.replace("T"," ")

                                    $('.non-payment').append(
                                        `
                             <tr>

                                        <td>${dom.id}</td>
                                        <td>${dom.storeList[0].storeName}</td>
                                        <td>${dom.storeList[0].storeScore}</td>

                                        <td>` + Ispay + `</td>
                                        <td>` + time + `</td>
                                        <td>
                                        <button class="layui-btn layui-btn-normal" ><a href="orderdetail.html?orderId=${dom.orderId}&orderIsPay=${dom.orderIsPay}">详情</a></button>
                                            <button class="layui-btn layui-btn-warm" onclick="delectOrder('${dom.orderId}')">删除</button>

                                        </td>
                                    </tr>
                     `)
                                });
                            }
                        })
                    }
                })


                //局部刷新已评论
                $.ajax({
                    url: "order/deleteOrderById",
                    data: {"orderId": orderId},
                    success: function () {

                        $.ajax({
                            url: "order/findOrderByUserId",
                            data: {"userId": user},
                            success: function (data) {
                                console.log(data.data)


                                var Ispay
                                var time
                                $('.obligation').html(' <thead>\n' +
                                    '                                    <tr>\n' +
                                    '                                        <th >订单号</th>\n' +
                                    '\n' +
                                    '                                        <th>店铺名</th>\n' +
                                    '                                        <th>商品数量</th>\n' +
                                    '                                        <th>状态</th>\n' +
                                    '                                        <th>操作</th>\n' +
                                    '                                        <td>下单时间</td>\n' +
                                    '\n' +
                                    '                                    </tr>\n' +
                                    '                                    </thead>')
                                $.each(data.data, function (i, dom) {


                                    if (dom.orderIsPay == "1" && dom.orderIsEvaluation == "0") {
                                        Ispay = "已支付"
                                    } else {
                                        return;
                                    }
                                    time = dom.orderHours
                                    time = time.substring(0, 16)
                                    time=time.replace("T"," ")

                                    $('.obligation').append(
                                        `
                             <tr>

                                        <td>${dom.id}</td>
                                        <td>${dom.storeList[0].storeName}</td>
                                        <td>${dom.storeList[0].storeScore}</td>

                                        <td>` + Ispay + `</td>
                                        <td>` + time + `</td>
                                        <td>
                                            <button class="layui-btn layui-btn-normal" ><a href="ordergrade.html?orderId=${dom.orderId}&orderIsPay=${dom.orderIsPay}">评价</a></button>
                                            <button class="layui-btn layui-btn-warm" onclick="delectOrder('${dom.orderId}')">删除</button>

                                        </td>
                                    </tr>
                     `)
                                });

                            }
                        })
                    }
                })

            }
        });

    }





    /* <a href="order/deleteOrderById?orderId=${dom.orderId}" data-method="setTop" class="layui-btn layui-btn-normal">详情</a>
     <a href="order/deleteOrderById?orderId=${dom.orderId}" data-method="setTop" class="layui-btn layui-btn-warm">删除</a>*/

</script>

<!--切换用户与订单的js-->
<script>
    function userInfo() {
        $("#order_info").css("display", "none")
        $("#user_info").css("display", "")

    }

    function orderInfo() {
        $("#user_info").css("display", "none")
        $("#order_info").css("display", "")

    }


    $.get("user/finduser", {}, function (data) {
        if (data.length > 0) {
            var user = data;

            $.ajax({
                url: "user/userInfo",
                data: {"userId": user},
                success: function (data) {
                    console.log(data)
                    $("#id").val(data.id)
                    $("#userId").val(data.userId)
                    $("#userAge").val(data.userAge)

                    var birthday = data.userBirthday
                    birthday = birthday.substring(0, 10)

                    $("#userBirthday").val(birthday)
                    $("#userEmail").val(data.userEmail)
                    $("#userLocation").val(data.userLocation)
                    $("#userPassword").val(data.userPassword)
                    $("#userPhone").val(data.userPhone)
                    $("#userProfessional").val(data.userProfessional)


                    if ("1" == data.userSex) {
                        $("#userSex optional:first ").select = true

                    } else {
                        $("#userSex optional ").eq(1).select = true
                    }


                    if ("1" == data.userVipGrade) {
                        $("#userVipGrade optional:first ").select = true
                    } else {
                        $("#userVipGrade optional ").eq(1).select = true
                    }


                }

            })


        }
    });


    function updataUserInfo() {
        $("#userVipGrade").removeAttr("disabled")
        $.post({
            url: "user/updataUserInfo",
            data: $("#userInfoForm").serialize(),
            success: function (data) {
                console.log(data)
                alert(data.message);
            }
        })

    }


</script>
</html>
